<template>
	<div class="base-info-content"> 
		<section class="mb20">
			<el-tag class="ml-2" type="warning">请您遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，美咚保有依据国家规定及平台规则进行处理的权利。</el-tag>
		</section>
		<h3 class="line-title">基础信息</h3>
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			:size="formSize" status-icon>

			<el-form-item label="商品名称" prop="name">
				<el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入商品名称" />
			</el-form-item>

			<el-form-item label="商品主图" >
				<section class="custome-form-item">
					<section class="selector-goods-img" @click="selectImg">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<p style="color: #ccc;">建议比例 16:9，支持 jpg、png 格式，大小不超过 5MB，最佳分辦率 750px*422px</p>
				
					<!-- <section class="selector-goods-img" @click="selectImg" style="width: 200px;">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<p style="color: #ccc;">支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸260px * 108px以上、大小不超过1M的长方形图片；</p>
				 -->
				</section>
			</el-form-item>

			<el-form-item label="简介" >
				<el-input
					v-model="ruleForm.description"
					:autosize="{ minRows: 2, maxRows: 4 }"
					type="textarea"
					placeholder="请输入商品简介"
				/>
			</el-form-item>
			<el-form-item label="相关资料" >
				<section style="display: flex; flex-direction: column;">
					<el-button  style="width: 100px;" type="primary" @click="addInformation"><el-icon><Plus /></el-icon>添加资料</el-button>
					<section>
						<el-table :data="state.tableData" style="width: 700px;" border class="mt20">
							<el-table-column label="排序" prop="date" /> 
							<el-table-column prop="date"> 
								<template #header>
									<section style="display: flex; align-items: center;">
									<span>封面</span>
									<el-tooltip  effect="dark" content="建议比例 16:9，支持 jpg、png 格式，大小不超过 5MB，最佳分辦率 750px*422px"  style=""
										placement="right-start" >
										<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
									</el-tooltip>
									</section> 
								</template> 
							</el-table-column>
							<el-table-column label="资料名称" prop="date" /> 
							<el-table-column label="用户权限设置" prop="date" /> 

							<el-table-column label="操作" prop="date"> 
								<template #default="scope">
									<el-button   text type="danger" @click="deleteHandle(scope.row)">
										删除
									</el-button>
								</template> 
							</el-table-column>
						</el-table>
					</section>
				</section>
			</el-form-item>

			<!-- <h3 class="line-title">商品类型</h3>
			<el-form-item label="商品类型" prop="type">
				<section style="display: flex; flex-direction: column;">
					<section>
						<el-radio-group v-model="ruleForm.type" >
							<el-radio-button :label="1">商品</el-radio-button>
							<el-radio-button :label="2">卡项</el-radio-button>
						</el-radio-group>
					</section>
					<section>
						商品类型在商品保存后<span style="color: #f55555;">无法修改，请谨慎选择!</span>
					</section>
				</section>
			</el-form-item> -->

			<el-form-item label="商品属性" prop="property">
				<el-select v-model="ruleForm.property" placeholder="请选择商品属性" class="form-ele-size">
					<el-option :label="p.label" :value="p.value" v-for="p of state.goodsProperty" :key="p.value" /> 
				</el-select>
			</el-form-item>

			<h3 class="line-title">销售渠道</h3>

			<el-form-item label="销售渠道" prop="cellPath">
				<el-checkbox-group v-model="ruleForm.cellPath">
					<el-checkbox label="门店销售" name="store" />
					<el-checkbox label="线上销售" name="line" /> 
				</el-checkbox-group>
			</el-form-item>
 
			<h3 class="line-title">商品信息</h3>

			<section class="" style="display: flex; padding:20px 0px; background-color: #f5f5f5;">
				<el-form-item label="零售价" prop="cellPrice">
					<el-input type="number" v-model="ruleForm.cellPrice" class="form-ele-size" placeholder="请输入零售价" ></el-input>&emsp;<strong>元</strong>
				</el-form-item>

				<el-form-item label="划线价">
					<el-input type="number" v-model="ruleForm.underlinePrice" class="form-ele-size" placeholder="请输入划线价" ></el-input>&emsp;<strong>元</strong>
				</el-form-item>

				<el-form-item label="最低价">
					<el-input type="number" v-model="ruleForm.minPrice" class="form-ele-size" placeholder="请输入最低价" ></el-input>&emsp;<strong>元</strong>
				</el-form-item>

				<el-form-item label="">
					<!-- <el-input type="number" v-model="ruleForm.minPrice" class="form-ele-size" placeholder="请输入最低价" ></el-input>&emsp;<strong>元</strong> -->
				</el-form-item>
			</section>

			<el-form-item label="上架设置" prop="setting">
				<el-radio-group v-model="ruleForm.publish">
					<el-radio :label="1">立即上架</el-radio>
					<el-radio :label="2">定时上架</el-radio>
					<el-radio :label="3">暂不上架</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="隐藏设置" >
				<el-checkbox v-model="ruleForm.hide" label="隐藏" name="1" />&nbsp;
				<el-tooltip  effect="dark" content="不可通过搜索或列表进行访问，仅可通过链接方式访问"  style=""
					placement="right-start" >
					<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
				</el-tooltip>
			</el-form-item>

			<h3 class="line-title">关联门店</h3>

			<el-form-item label="销售门店" prop="cellStore">
				<el-button type="primary"  @click="selectStore">选择销售门店</el-button>
			</el-form-item>

			<h3 class="line-title">提成设置</h3>

			<el-form-item label="提成设置" prop="setting">
				<el-radio-group v-model="ruleForm.setting">
					<el-radio :label="1">统一提成</el-radio>
					<el-radio :label="2">岗位提成</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="统一提成比例" prop="setting">
				<el-input type="number" v-model="ruleForm.name" class="form-ele-size" placeholder="请输入统一提成比例" ></el-input>&emsp;<strong>%</strong>
			</el-form-item>
			
			<section style="text-align: center; margin: 50px 0;">
				<el-button type="primary" size="large" @click="submitForm(ruleFormRef)">提交</el-button>
				<el-button type="primary" size="large" @click="nextStep">下一步</el-button>
			</section>
		</el-form> 

		<SelectGoodsImg v-model="selectVisibel" /> 
		<SelectCellStore v-model="storeVisibel" />
		<AddBrand v-model="brandVisibel" />
		<AddCateGory v-model="categoryVisibel"  />
		<AddInformation v-model="informationVisibel" />
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { TStep } from '../add.vue' 

const SelectGoodsImg = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/SelectGoodsImg.vue' ))
const SelectCellStore = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/SelectCellStore.vue'  ))
const AddBrand = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/AddBrand.vue'  ))
const AddCateGory = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/AddCategory.vue'  ))
const AddInformation = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/AddInformation.vue'  ))
// import SelectGoodsImg from '/@/views/commodity/videoList/components/SelectGoodsImg.vue' 
// import SelectCellStore from '/@/views/commodity/videoList/components/SelectCellStore.vue' 
// import AddBrand from '/@/views/commodity/videoList/components/AddBrand.vue' 
// const eventEmit = defineEmits(['stepChange'])
const emit = defineEmits<{
	stepChange: [step: TStep] 
}>()

const selectVisibel = ref(false)
const storeVisibel = ref(false)
const brandVisibel = ref(false)
const categoryVisibel = ref(false)
const informationVisibel = ref(false)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const state = reactive({
	goodsProperty: [
		{ label: '商品', value: 1},
		{ label: '家具', value: 2},
		{ label: '套盒', value: 3},
	],
	tableData: []
})
const ruleForm = reactive({
	publish: 2,
	source: 2,
	hide: false,
	type: 1,
	property: '',
	cellPath: [],
	status: [],
	system: '', 
	brand: '',
	category: '',
	name: '',
	description: '',
	setting: 1,
	cellStore: [],
	underlinePrice: '',
	cellPrice: '',
	minPrice: ''
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	property: [ {required: true, message: '请选择商品属性', trigger: 'change', }],
	status: [ {required: true, message: '请选择销售状态', trigger: 'change', }],
	system: [ {required: true, message: '请选择系统分类', trigger: 'change', }],
	brand: [ {required: true, message: '请选择商品品牌', trigger: 'change', }],
	category: [ {required: true, message: '请选择门店商品分类', trigger: 'change', }],
	cellStore: [ {required: true, message: '请选择门店商品分类', trigger: 'blur', }],
	cellPrice: [ {required: true, message: '请输入商品零售价', trigger: 'blur', }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const nextStep = () => {
	emit('stepChange', 'second')
}

const addCategores = () => categoryVisibel.value = true;
const addBrand = () => brandVisibel.value = true;
const selectImg =  () => selectVisibel.value = true;
const addInformation =  () => informationVisibel.value = true;
const deleteHandle = (row: any) => {

}

const selectStore = () => {
	storeVisibel.value = true
}
</script>

<style lang="scss" scoped>
.custome-form-item{
	display: flex;
	flex-direction: column;
}
.base-info-content{
	.form-ele-size {
		width: 200px;
	}
	.line-title{
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}
	.selector-goods-img{
		cursor: pointer;
		width: 90px;
		height: 90px;
		border: 1px solid #ededed;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
}
</style>
